<!--
 * @Description: 视频预览组件
 * @Author: Kerwin
 * @Date: 2024-09-11 15:43:37
 * @LastEditTime: 2024-09-11 16:22:03
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="c_container">
        <u-popup v-model="show" mode="center">
            <view class="video-box" @click = "close">
                <video class="video" autoplay :controls="false" :object-fit="'contain'" :http-cache="true" preload="auto"
                    :src="videoUrl" :poster="poster"></video>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const show = ref(false)
const videoUrl = ref('')
const poster = ref('')
const open = (url: string, previewImage: string) => {
    show.value = true
    videoUrl.value = url
    poster.value = previewImage
}
const close = () => {
    show.value = false
}
defineExpose({
    open
})
</script>

<style scoped lang="scss">
.video-box {
    width: 100vw;
    height: 100vh;

    .video {
        width: 100%;
        height: 100%;
    }
}
</style>